<template>
  <div>
    <el-card>
      <el-alert
        title="添加商品信息"
        type="info"
        center
        show-icon
        :closable="false"
      ></el-alert>
      <el-steps
        :space="200"
        :active="active_index - 0"
        finish-status="success"
        align-center
      >
        <el-step title="基本信息"></el-step>
        <el-step title="是否多规格"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="详细参数"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <el-form
        label-position="top"
        :model="info"
        :rules="add_rules"
        ref="add_ref"
      >
        <el-tabs
          :tab-position="'left'"
          v-model="active_index"
          :before-leave="beforeLeave"
        >
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品分类" prop="product_type_id">
              <el-cascader
                placeholder="请选择商品分类"
                v-model="info.product_type_id_arr"
                :options="product_type_list"
                :props="{ expandTrigger: 'hover', value: 'id', label: 'title' }"
                @change="add_handle_change"
                clearable
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
              <el-input
                placeholder="请输入商品名称"
                maxlength="30"
                clearable
                show-word-limit
                v-model="info.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品描述" prop="describe">
              <el-input
                placeholder="请输入商品描述"
                maxlength="100"
                clearable
                show-word-limit
                type="textarea"
                :rows="3"
                v-model="info.describe"
              ></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="image_id">
              <s-file-image
                :image_list="image_list"
                @confirm_imsge="add_confirm_image"
              ></s-file-image>
            </el-form-item>
            <el-form-item label="轮播图">
              <s-file-image
                :image_list="info.images_arr"
                :count="9"
                @confirm_imsge="add_confirm_image_all"
              ></s-file-image>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input
                type="number"
                placeholder="请输入排序"
                maxlength="10"
                clearable
                show-word-limit
                v-model="info.sort"
              ></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="是否多规格" name="1">
            <el-form-item label="是否多规格" prop="specs_status">
              <el-radio-group v-model="info.specs_status" size="medium">
                <el-radio disabled border :label="0">否</el-radio>
                <el-radio disabled border :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
            <div
              v-if="
                info.specs_status === 1 && info.attrbute_key_list.length > 0
              "
            >
              <el-form-item
                v-for="item in info.attrbute_key_list"
                :key="item.id"
                :label="item.name"
              >
                <el-checkbox
                  border
                  v-for="i in item.sub"
                  :key="i.id"
                  :label="i.name"
                  checked
                  disabled
                ></el-checkbox>
              </el-form-item>
            </div>

            <div v-else>暂无属性</div>
          </el-tab-pane>
          <el-tab-pane label="详细参数" name="3">
            <table v-if="info.specs_status === 1">
              <thead>
                <tr>
                  <th
                    v-for="(item, index) in info.attrbute_key_list"
                    :key="index"
                  >
                    {{ item.name }}
                  </th>
                  <th>产品售价</th>
                  <th>产品市场价</th>
                  <th>产品成本价</th>
                  <th>邮费</th>
                  <th>库存</th>
                  <th>销量</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in info.product_spec_to" :key="index">
                  <td v-for="(i, ind) in item.specs" :key="ind">
                    {{ i.name }}
                  </td>
                  <td>
                    <el-input
                      maxlength="10"
                      v-model="item.money"
                      clearable
                      show-word-limit
                    ></el-input>
                  </td>
                  <td>
                    <el-input
                      maxlength="10"
                      v-model="item.bazaar_money"
                      clearable
                      show-word-limit
                    ></el-input>
                  </td>
                  <td>
                    <el-input
                      maxlength="10"
                      v-model="item.cost_money"
                      clearable
                      show-word-limit
                    ></el-input>
                  </td>
                  <td>
                    <el-input
                      maxlength="10"
                      v-model="item.postage"
                      clearable
                      show-word-limit
                    ></el-input>
                  </td>
                  <td>
                    <el-input
                      maxlength="10"
                      v-model="item.stock"
                      clearable
                      show-word-limit
                    ></el-input>
                  </td>
                  <td>
                    <el-input
                      maxlength="10"
                      v-model="item.sales"
                      clearable
                      show-word-limit
                    ></el-input>
                  </td>
                </tr>
              </tbody>
            </table>
            <div v-else>
              <el-form-item label="产品售价">
                <el-input
                  placeholder="请输入产品售价"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="form_d.money"
                ></el-input>
              </el-form-item>
              <el-form-item label="产品市场价">
                <el-input
                  placeholder="请输入产品市场价"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="form_d.bazaar_money"
                ></el-input>
              </el-form-item>
              <el-form-item label="产品成本价">
                <el-input
                  placeholder="请输入产品成本价"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="form_d.cost_money"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮费">
                <el-input
                  placeholder="请输入邮费"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="form_d.postage"
                ></el-input>
              </el-form-item>
              <el-form-item label="销量">
                <el-input
                  placeholder="请输入销量"
                  maxlength="10"
                  clearable
                  show-word-limit
                  v-model="form_d.sales"
                ></el-input>
              </el-form-item>
              <el-form-item label="库存">
                <el-input
                  placeholder="请输入库存"
                  maxlength="10"
                  s
                  clearable
                  show-word-limit
                  v-model="form_d.stock"
                ></el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <el-form-item label="商品内容">
              <s-editor
                :content="info.content"
                @confirm_content="confirm_content"
              ></s-editor>
            </el-form-item>
            <el-button
              class="send_btn"
              :disabled="btnStatus.update"
              type="primary"
              @click="edit()"
              >确 定</el-button
            >
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import sFileImage from "@/components/s-file-image/s-file-image.vue";
import sEditor from "@/components/s-editor/s-editor.vue";
export default {
  components: {
    "s-file-image": sFileImage,
    "s-editor": sEditor
  },
  data() {
    var checkSort = (rule, value, callback) => {
      // 定义正则表达式
      const regSort = /^[1-9]{1}[0-9]{0,10}$/;
      if (regSort.test(value)) {
        return callback();
      }
      callback(new Error("请输入排序（大于0的数字）!"));
    };
    return {
      btnStatus: this.is_string(
        {
          update: "shop/product/update"
        },
        this
      ),
      active_index: "0",
      id: this.$route.query.id, // 商品id
      info: {},
      image_list: [],
      form_d: {},
      product_type_list: [], // 商品分类数据
      add_rules: {
        product_type_id: [
          { required: true, message: "请选择商品分类！", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入商品名称！", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "商品名称长度在2到20个字符",
            trigger: "blur"
          }
        ],
        describe: [
          { required: true, message: "请输入商品描述！", trigger: "blur" },
          {
            min: 2,
            max: 100,
            message: "商品描述长度在2到100个字符",
            trigger: "blur"
          }
        ],
        image_id: [
          { required: true, message: "请选择图片！", trigger: "blur" }
        ],
        specs_status: [
          { required: true, message: "请选择是否多规格！", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "请输入排序！", trigger: "blur" },
          { validator: checkSort, trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.get_product_type_list(() => {
      this.get_edit();
    });
  },
  methods: {
    // 商品分类
    get_product_type_list(callBack) {
      this.$base.request(
        {
          that: this,
          url: "shop/product/product_type_list"
        },
        res => {
          if (res.code === 8888) {
            this.product_type_list = res.data;
            callBack && callBack();
          }
        }
      );
    },
    // 编辑页面数据
    get_edit(callBack) {
      this.$base.request(
        {
          that: this,
          url: "shop/product/edit",
          data: { id: this.id }
        },
        res => {
          if (res.code === 8888) {
            this.info = res.data;
            this.form_d = res.data.product_spec_to[0];
            this.image_list = [
              {
                id: res.data.image_id,
                url: res.data.image_url
              }
            ];
            callBack && callBack();
          }
        }
      );
    },
    // 确定
    edit() {
      this.$refs.add_ref.validate(valid => {
        if (valid) {
          if (this.info.specs_status === 0) {
            this.info.product_spec_to[0] = this.form_d;
          }
          this.$base.request(
            {
              that: this,
              method: "PUT",
              url: "shop/product/update",
              data: this.info
            },
            res => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg });
                this.$router.push("/shop/product/index");
              }
            }
          );
        }
      });
    },
    // 编辑器回调
    confirm_content(res) {
      this.info.content = res;
    },
    // 切换选项卡触发
    beforeLeave(activeName, oldActiveName) {
      this.$refs.add_ref.validate(() => {});
      if (oldActiveName === "0" && this.info.product_type_id_arr.length === 0) {
        return false;
      }
    },

    // 添加图片回调
    add_confirm_image(res) {
      this.info.image_id = res[0].id;
    },
    // 添加多图回调
    add_confirm_image_all(res) {
      if (res.length > 0) {
        const imageArr = [];
        for (var i = 0; i < res.length; i++) {
          imageArr.push(res[i].id);
        }
        this.info.images = imageArr.join("|");
      } else {
        this.info.images = "";
      }
    },
    // 添加获取选择器值
    add_handle_change() {
      if (this.value.length > 0) {
        this.info.product_type_id = this.info.product_type_id_arr[
          this.info.product_type_id_arr.length - 1
        ];
      } else {
        this.add_form.product_type_id = "";
        this.info.product_type_id_arr = [];
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "edit.scss";
</style>
